<template>
    <div>
        <!--        <div class="page-header">-->
        <!--            <Row>-->
        <!--                <Col span="5">-->
        <!--                    <Input v-model="value14" placeholder="Enter something..." clearable style="width: 200px" />-->
        <!--                </Col>-->
        <!--                <Col span="5">-->
        <!--                    <Input v-model="value14" placeholder="Enter something..." clearable style="width: 200px" />-->
        <!--                </Col>-->
        <!--                <Col span="4">-->
        <!--                    <Button type="primary" class="lyx-mr10">查询</Button>-->
        <!--                </Col>-->
        <!--            </Row>-->
        <!--        </div>-->
        <div class="page-content">
            <Row>
                <Col span="24" class="lyx-mb10">
                    <Table border ref="selection" :columns="columns4" :data="data1" @on-selection-change="tableSelectChange"></Table>
                </Col>
            </Row>
            <Row type="flex" justify="space-between" class="lyx-mb10">
                <Col span="12">
                    <!--                    <Button @click="handleSelectAll(true)" class="lyx-mr10">全选</Button>-->
                    <!--                    <Button @click="handleSelectAll(false)">取消</Button>-->
                </Col>
                <Col span="12">
                    <Page :total="4" show-total />
                </Col>
            </Row>
        </div>
        <Modal v-model="modal1" title="项目详情" @on-ok="modal1 = false" @on-cancel="modal1 = false" width="60">
            <div class="detail">
                <Divider orientation="left">项目详情</Divider>
                <Row class="p10" style="height: 30px; font-size: 15px">
                    <Col span="12">
                        <span class="bold">项目名称:</span>
                        <span>{{dataInfo.name}}</span>
                    </Col>
                    <Col span="10">
                        <span class="bold">参评社会组织性质:</span>
                        <span>{{dataInfo.organizations}}</span>
                    </Col>
                </Row>
                <Row class="p10" style="height: 30px; font-size: 15px">
                    <Col span="12">
                        <span class="bold">评估年度:</span>
                        <span>{{dataInfo.year}}</span>
                    </Col>
                    <Col span="12">
                        <span class="bold">评估申请截止时间:</span>
                        <span>{{dataInfo.end_time}}</span>
                    </Col>
                </Row>
                <Row class="p10" style="height: 30px; font-size: 15px">
                    <Col span="12">
                        <span class="bold">参评条件:</span>
                        <span>{{dataInfo.evaluation}}</span>
                    </Col>
                </Row>
                <Divider orientation="left">申报内容</Divider>
                <Row class="p10" style="height: 30px; font-size: 15px">
                    <Col span="12">
                        <span class="bold">申请标题:</span>
                        <span>{{dataInfo.title}}</span>
                    </Col>
                    <Col span="10">
                        <span class="bold">申请内容:</span>
                        <span>{{dataInfo.content}}</span>
                    </Col>
                </Row>
                <Row class="p10" style="height: 30px; font-size: 15px">
                    <Col span="12">
                        <span class="bold">申请材料:</span>
                        <span>{{dataInfo.material}}</span>
                    </Col>
                </Row>
            </div>
            <div slot="footer">
                <Button type="primary" size="large"   @click="modal1 = false">确定</Button>
            </div>
        </Modal>
        <Modal v-model="modal2" title="项目审批" @on-ok="modal2 = false" @on-cancel="modal2 = false" width="60">
            <div class="detail">
                <Form :model="formItem" :label-width="220">
                    <FormItem label="审批意见">
                        <Input v-model="formItem.idea" type="textarea" :rows="5" placeholder="审批意见(填写通过或不通过)" style="width: 70%"></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <Button type="primary" size="large"   @click="ok(formItem)">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
  data () {
    return {
      modal1: false,
      modal2: false,
      dataInfo: {},
      submitInfo: {},
      formItem: {
        idea: ''
      },
      columns4: [
        {
          title: '申报项目名称',
          key: 'name'
        },
        {
          title: '标题',
          key: 'title'
        },
        {
          title: '内容',
          key: 'content'
        },
        {
          title: '状态',
          key: 'state'
        },
        {
          title: '操作',
          key: 'age',
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'success', size: 'small' },
                on: {
                  click: () => {
                    this.modal1 = true
                    this.dataInfo = params.row
                  }
                }
              }, '查看详情')
            )
            if (params.row.state === '未审批') {
              temp.push(
                h('Button', {
                  props: { type: 'info', size: 'small' },
                  style: { marginLeft: '5px' },
                  on: {
                    click: () => {
                      this.declareInfo(params.row)
                    }
                  }
                }, '审批')
              )
            }
            return h('div', temp)
          }
        }
      ],
      data1: [
        {
          id: 1,
          name: '守护生命，救在身边',
          organizations: '竞争性营利组织',
          year: '2019',
          end_time: '2019-10-1',
          evaluation: '条件',
          title: 18,
          content: '守护生命，救在身边创新项目',
          material: '材料',
          state: '未审批'
        },
        {
          id: 2,
          name: '论技术',
          organizations: '竞争性非营利组织',
          year: '2019',
          end_time: '2019-10-1',
          evaluation: '条件',
          title: 24,
          content: '论技术创新的应用性',
          material: '材料',
          state: '已通过'
        },
        {
          id: 3,
          name: '复杂产品系统创新',
          organizations: '独占性营利组织',
          year: '2019',
          end_time: '2019-10-1',
          evaluation: '条件',
          title: 30,
          content: '复杂产品系统创新',
          material: '材料',
          state: '未通过'
        },
        {
          id: 4,
          name: '社会治理与社会创新',
          organizations: '竞争性营利组织',
          year: '2019',
          end_time: '2019-10-1',
          evaluation: '条件',
          title: 26,
          content: '社会治理与社会创新应用',
          material: '材料',
          state: '未通过'
        }
      ]
    }
  },
  methods: {
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    },
    tableSelectChange (selection) {
      console.log(selection)
    },
    delSelect () {
    },
    declareInfo (item) {
      console.log(item)
      this.submitInfo = item
      this.modal2 = true
    },
    ok () {
      console.log('!!!!')
      console.log(this.submitInfo)
      for (var i = 0; i < this.data1.length; i++) {
        if (this.data1[i].id === this.submitInfo.id && this.formItem.idea === '通过') {
          this.data1[i].state = '已通过'
          this.modal2 = false
        } else if (this.data1[i].id === this.submitInfo.id && this.formItem.idea === '不通过') {
          this.data1[i].state = '未通过'
          this.modal2 = false
        }
      }
    }
  }
}
</script>

<style scoped>
    .page-header{
        margin-bottom: 20px;
    }
    .lyx-mr10{
        margin-right: 10px;
    }
    .lyx-mb10{
        margin-bottom: 10px;
    }
</style>
